<template>
	<div>
		<div class="search">
		  <input v-model="keyword" class="search-input" type="text" placeholder="输入城市名或拼音"/>
	    </div>
	    <div class="search-content" ref="search" v-show="keyword">
	    	<ul>
	    		<li class="search-item" v-for="item of list" :key="item.id"  @click="handleCityClick(item.name)">{{item.name}}</li>
	    		<li class="search-item" v-show="hasNolist">没有找到匹配数据</li>
	    	</ul>
	    </div>
	</div>
</template>

<script>
	import BScroll from 'better-scroll'
	export default {
		name: 'CitySearch',
		props: {
			cities: Object
		},
		data () {
			return{
				keyword: '',
				list: [],
				timer: null
			}
		},
		methods: {
			handleCityClick (city) {
				this.$store.commit('changeCity', city)
				this.$router.push('/')
			}
		},
		computed: {
			hasNolist () {
				return !this.list.length
			}
		},
		watch: {
			keyword () {
				if (this.timer) {
					clearTimeout(this.timer)
				}
				if (!this.keyword) {
					this.list = []
					return
				}
				this.timer = setTimeout(() => {
					const result = []
					for (let i in this.cities) {
						this.cities[i].forEach((value) => {
							if (value.name.indexOf(this.keyword) > -1 || value.spell.indexOf(this.keyword) > -1) {
								result.push(value)
							}
						})
					}
					this.list = result
					console.log(this.list)
				},100)
			}
		},
		mounted () {
			this.scrool = new BScroll(this.$refs.search)
		}
	}
</script>

<style lang="stylus" scoped="scoped">
	  @import '~styles/varibles.styl'
	  .search
	   height:37px
	   padding:0 5px
	   background:$bgColor
	   .search-input
	     box-sizing:border-box
	     padding: 0 10px
	     display:block
	     width:100%
	     height:31px
	     line-height:31px
	     text-align:center
	     border-radius:3px
	     color:#666
	  .search-content
	     position:absolute
	     top:80px
	     left:0
	     right:0
	     bottom:0
	     overflow:hidden
	     background:#f1f1f1
	     z-index:1
	     .search-item
	       line-height: 32px
	       padding-left:10px
	       color:#666
	       background:#fff
	       border-bottom:1px solid #ccc
</style>